<template>
  <div id="time-box">
    <p class="date" v-if="cur_state==='real'"><span>{{date}}</span><span>{{week}}</span></p>
    <p class="time" v-if="cur_state==='real' && (cur_index_type == '03'&&map_level=='04' || cur_index_type !== '03')"><span class="pre">{{preTime}}</span><span class="cur"> ~ {{curTime}}</span></p>
    <p class="time" v-if="cur_state==='real' && cur_index_type === '03'&&map_level!=='04'"><span class="pre">{{preHour}}</span><span class="cur"> ~ {{curHour}}</span></p>
    <p style="margin-left:8px;" class="date" v-if="cur_state==='history'"><span>{{history_time.year}}年</span><span v-if="history_type === 'month'">{{history_time.month}}月</span></p>
    <p class="time" v-if="cur_state==='history'"><span class="pre">{{history_hour}}:00</span><span class="cur"> ~ {{history_hour+1}}:00</span></p>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import DateTimeHelper from '../../util/datetime-helper';
  import eventBus from '../../util/event-bus';
  export default {
    name: 'TimeBox',
    data () {
      return {
        date: '',
        week:'',
        preTime:'',
        curTime:'',
        preHour:'',
        curHour:'',
      }
    },
    mounted(){
      this.$nextTick(() => {
          this.getTimeShow();
          this.getWeekShow();
          // todo:发布会后改成按照服务端返回结果显示
          this.preTime = DateTimeHelper.getPreTime(this.cur_timestamp);
          this.curTime = DateTimeHelper.getCurTime(this.cur_timestamp);
          this.preHour = DateTimeHelper.getPreHour(this.cur_timestamp);
          this.curHour = DateTimeHelper.getCurHour(this.cur_timestamp);
      });
      eventBus.$on('setGlobalInterval',() => {
        this.getTimeShow();
        this.getWeekShow();
        this.preTime = DateTimeHelper.getPreTime(this.cur_timestamp);
        this.curTime = DateTimeHelper.getCurTime(this.cur_timestamp);
        this.preHour = DateTimeHelper.getPreHour(this.cur_timestamp);
        this.curHour = DateTimeHelper.getCurHour(this.cur_timestamp);
      });
    },
    computed: {
      ...mapGetters([ 'map_level','cur_state','cur_index_type', 'cur_timestamp','history_time','history_hour','history_type','server_timestamp']),
    },
    methods:{
      getTimeShow(){
        if(this.cur_timestamp){
            let time = this.cur_timestamp;
            this.date = time.slice(0,4)+'年'+time.slice(4,6)+'月'+time.slice(6,8)+'日';
        }
      },
      getWeekShow(){
        let str = "周";
        let week = new Date().getDay();
        switch (week) {
          case 0 :
            str += "日";
            break;
          case 1 :
            str += "一";
            break;
          case 2 :
            str += "二";
            break;
          case 3 :
            str += "三";
            break;
          case 4 :
            str += "四";
            break;
          case 5 :
            str += "五";
            break;
          case 6 :
            str += "六";
            break;
        }
        this.week = str;
      }
    }
  }
</script>

<style scoped lang="scss">
  #time-box {
    width: 200px;
    min-height: 50px;
    position: absolute;
    left: 15px;
    bottom: 10px;
    z-index: 100;
    font-weight: bold;
    .date{
      font-size: 15px;
      letter-spacing: 1px;
      opacity: 0.8;
      span{
        margin-right: 8px;
      }
    }
    .time{
      line-height: 50px;
      .pre{
        font-size: 36px;
      }
      .cur{
        font-size: 20px;
        opacity: 0.5;
      }
    }
  }
</style>
